import React from 'react';
import allTypes from '@/utils/Data';
import {
  Card,
  Form,
  Button,
  DatePicker,
  Select,
  Input,
} from '@arco-design/web-react';
import { IconInfoCircle } from '@arco-design/web-react/icon';

const FormItem = Form.Item;
function TableSearch({ getSearchData }) {
  const [form] = Form.useForm();

  const timeData = allTypes.timeData;
  const selectData = allTypes.typeList;

  function reSetBtn() {
    form.resetFields();
  }

  return (
    <Card style={{ marginBottom: 20 }}>
      <Form
        form={form}
        initialValues={{ type: null, time: null }}
        layout="inline"
        onValuesChange={(_, values: any) => {
          const obj = {
            StartDate: values.time
              ? new Date(values.time[0]).toISOString()
              : null,
            EndDate: values.time
              ? new Date(values.time[1]).toISOString()
              : null,
            type: values.type,
          };
          getSearchData(obj);
        }}
      >
        <FormItem label="企业子账号">
          <Input placeholder="企业子账号名字" />
        </FormItem>
        <FormItem label="类型" field="type">
          <Select
            placeholder="请选择"
            style={{ width: 200 }}
            options={selectData}
          />
        </FormItem>
        <FormItem label="操作">
          <Input placeholder="企业子账号名字" />
        </FormItem>
        <FormItem label="时间筛选" field="time">
          <DatePicker.RangePicker
            shortcuts={timeData}
            prefix={<IconInfoCircle />}
          />
        </FormItem>

        <FormItem wrapperCol={{ offset: 5 }}>
          <Button type="primary">查询</Button>
        </FormItem>
        <FormItem wrapperCol={{ offset: 5 }}>
          <Button onClick={() => reSetBtn()}>重置</Button>
        </FormItem>
      </Form>
    </Card>
  );
}

export default TableSearch;
